// 1.creatApp生成一个app实例
// applicationCache.directive('指令名称'{配置项})
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install (app) {
    app.directive('imgLazy', {
      // 指令挂载到节点上立刻执行
      mounted (el, { value }) {
        const { stop } = useIntersectionObserver(el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting 控制true来判断是否发起ajax请求
            if (isIntersecting) {
              // 当图片加载失败，使用默认图片
              el.addEventListener('error', () => {
                el.src = defaultImg
              })
              el.src = value
              // 第一次请求成功后停止监听
              stop()
            }
          },
          {
            // 用来控制目标target进入视口区域的比例
            // 0-1，数值越大要求进入视口区域面积越大，才会触发回调
            // 0-1，数值越小要求进入视口区域面积越小，才会触发回调
            threshold: 0
          }
        )
      }
    })
  }
}
